<!--
 * @Author: shenya
 * @Date: 2023-08-08 11:36:22
 * @Description: 猫咪信息
-->
<template>
  <el-dialog
    title="猫咪信息"
    :visible.sync="visible"
    width="60%"
    append-to-body
  >
    <template
      v-for="item in form"
    >
      <avue-form
        :key="item.id"
        :value="item"
        :option="petOption"
      >
      </avue-form>
      <div
        :key="`detail_${item.id}`"
        class="pet-information">
        <div>
          <div class="title">为什么决定将猫咪送养:</div>
          <div>{{ item.giveReason }}</div>
        </div>
        <div>
          <div class="title">请提供猫咪的医疗历史和行为特点</div>
          <div>{{ item.medicalHistory }}</div>
        </div>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import { getPetInformation } from '@/api/core/appointment';
import { petOption } from '@/const/crud/appointment/confirmPopup';
export default {
  props: {
    id: {
      type: String,
    },
    value: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      form: {},
    };
  },
  computed: {
    visible: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      },
    },
    petOption() {
      return petOption();
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.$nextTick(() => {
          this.getDetail();
        });
      }
    },
  },
  methods: {
    getDetail() {
      getPetInformation(this.id).then((res) => {
        // res.data.data.map((item) => {
        //   this.form = item;
        // });
        this.form = res.data.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.pet-information {
  margin-left: 60px;
  .title {
    font-weight: bold;
    margin: 10px 0px;
  }
}
</style>
